<template>
  <div class="add">
    <el-form :model="form.evaluate" label-width="100px" :rules="form.rules" inline ref="form" size="small">
      <!-- 考评基本信息 -->
      <div class="evaluate">
        <div class="title-back">
          <div class="title">考评操作</div>
          <div class="back">
            <div class="note">提交后 , 除 "整改限时、考评时间" 其他无法修改</div>
            <el-button size="small" @click="$router.go(-1)">返回</el-button>
          </div>
        </div>
        <div class="form">
          <el-form-item label="标题" prop="title">
            <!-- 公厕手输 -->
            <el-input v-model="form.evaluate.title" placeholder="请输入" v-if="form.evaluate.type == 3"></el-input>
            <!-- 其他选择 -->
            <el-select v-model="form.evaluate.title" placeholder="请选择或搜索" filterable clearable v-else>
              <el-option label="2024年海曙区农村人居环境测评" value="2024年海曙区农村人居环境测评"></el-option>
              <el-option label="2024年海曙区农村生活垃圾分类测评" value="2024年海曙区农村生活垃圾分类测评"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考评员" prop="user_id">
            <el-select v-model="form.evaluate.user_id" placeholder="请选择或搜索" filterable clearable>
              <el-option :label="item.username" :value="item.id" v-for="item in checkList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="街道" prop="street_id">
            <el-select v-model="form.evaluate.street_id" placeholder="请选择或搜索" filterable clearable @change="getStreetVillageList">
              <el-option :label="item.title" :value="item.id" v-for="item in streetList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考评时间" prop="time">
            <el-date-picker v-model="form.evaluate.time" type="date" placeholder="请选择" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="街道管理员">{{ getCheckStreetUserName() }}</el-form-item>
          <el-form-item label="整改限时" prop="expire_time">
            <el-date-picker v-model="form.evaluate.expire_time" type="date" placeholder="请选择" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="村" prop="village_id">
            <el-select v-model="form.evaluate.village_id" placeholder="请选择或搜索" filterable clearable>
              <el-option :label="item.title" :value="item.id" v-for="item in villageList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核员" prop="auditor_id">
            <el-select v-model="form.evaluate.auditor_id" placeholder="请选择或搜索" filterable clearable>
              <el-option :label="item.username" :value="item.id" v-for="item in auditorList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="村管理员">{{ getCheckVillageUserName() }}</el-form-item>
        </div>
      </div>
      <div class="standard">
        <div class="title">细则</div>
        <div class="year-period">
          <el-form-item label="年份" prop="year">
            <el-select v-model="form.evaluate.year" placeholder="请选择或搜索" filterable clearable @change="getStandardList">
              <el-option :label="item.year" :value="item.year" v-for="item in yearPeriodList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="期数" prop="period">
            <el-select v-model="form.evaluate.period" placeholder="请选择或搜索" filterable clearable>
              <el-option :label="item" :value="item" v-for="item in getPeriodList()" :key="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="color: #909399">注 : 提交后,无法修改. 如有问题,请删除后,重新添加</el-form-item>
        </div>
        <div class="list">
          <div class="item" v-for="(standard, standardIndex) in standardList" :key="standard.id">
            <div class="title-score">
              <div class="title">{{ standardIndex + 1 }} : {{ standard.title }}</div>
              <div class="score">({{ standard.score }}分)</div>
            </div>
            <div class="content">{{ standard.content }}</div>
            <div class="change">
              <div class="label">开启整改 :</div>
              <el-switch
                active-color="#409EFF"
                inactive-color="#EAECF0"
                v-model="standard.state"
                :active-value="1"
                :inactive-value="0"
                @change="changeState(standard)"
              ></el-switch>
            </div>
            <div class="upload-issueSetting" v-if="standard.state">
              <uploads @file="uploadOld" :info="standardIndex" :data="{ compress: 1, thumb: 1 }"></uploads>
              <el-button
                type="primary"
                size="small"
                @click="
                  oneKeyIssue.list = standard;
                  oneKeyIssue.show = true;
                "
                >一键问题设置</el-button
              >
            </div>
            <div class="issue-list">
              <div class="item" v-for="(issueImg, issueImgIndex) in standard.issueImgList" :key="issueImg.img_before">
                <div class="img">
                  <div
                    class="old"
                    @click="
                      img.show = true;
                      img.src = issueImg.img_before;
                    "
                  >
                    <div class="bg" :style="{ 'background-image': `url(${issueImg.img_before_thumb})` }"></div>
                    <div class="label">{{ issueImg.img_before_title }}</div>
                  </div>
                  <div class="icon fa fa-arrows-h"></div>
                  <div class="new">
                    <div class="bg">
                      <div class="icon el-icon-plus"></div>
                    </div>
                    <div class="label"></div>
                  </div>
                </div>
                <div class="message">
                  <div class="header">
                    <div class="number">序号 : {{ issueImgIndex + 1 }}</div>
                    <div class="right">
                      <div class="is-change">
                        <el-switch
                          v-model="issueImg.is_change"
                          active-text="需要整改"
                          inactive-text="不需要整改"
                          :active-value="1"
                          :inactive-value="0"
                        >
                        </el-switch>
                      </div>
                      <div class="describe">
                        <el-select placeholder="请选择或搜索" filterable clearable size="small" v-model="issueImg.issue">
                          <el-option :label="item" :value="item" v-for="item in standard.issueList" :key="item"></el-option>
                        </el-select>
                      </div>
                      <div class="add-message" @click="editOldMessage(issueImg)">
                        <i class="fa fa-pencil"></i>
                      </div>
                      <div class="delete-issue" @click="delIssueImg(standard.issueImgList, issueImgIndex)">
                        <i class="fa fa-trash" style="color: #f40"></i>
                      </div>
                    </div>
                  </div>
                  <el-tooltip effect="dark" :content="issueImg.info_before" placement="top-start">
                    <div class="content">考评员 : {{ issueImg.info_before }}</div>
                  </el-tooltip>
                  <!-- <el-tooltip effect="dark" content="321312" placement="top-start">
                    <div class="content">问题反馈 : 321312</div>
                  </el-tooltip> -->
                </div>
              </div>
            </div>
            <div class="score-count">
              <div class="score">
                <p>
                  扣分 : <span>{{ standard.before_score }}</span>
                </p>
                <p>
                  得分 : <span>{{ parseFloat((standard.score - standard.before_score).toFixed(2)) }}</span>
                </p>
                <i class="fa fa-pencil" @click="editOldMinusScore(standard)"></i>
              </div>
              <div class="count">
                <p>
                  问题 : <span>{{ standard.issueImgList.length }}</span>
                </p>
                <p>整改 : <span>0</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sumScoreCount">
        <div class="item">
          <p>
            总分 : <span>{{ getStandardSumScore() }}</span>
          </p>
          <p>
            总得分 : <span>{{ getStandardSumGetScore() }}</span>
          </p>
        </div>
        <div class="item">
          <p>
            总问题 : <span>{{ getStandardIssueImgSum() }}</span>
          </p>
          <p>总整改 : <span>0</span></p>
        </div>
      </div>
      <div class="submit">
        <el-button size="small" type="primary" @click="submit" :loading="form.loading">保 存</el-button>
        <el-button type="primary" @click="submitChange" size="small" :loading="form.loading">提交整改</el-button>
        <el-button size="small">返 回</el-button>
      </div>
    </el-form>

    <!-- 一键设置问题 -->
    <el-dialog title="操作" :visible.sync="oneKeyIssue.show" width="30%">
      <el-form :model="oneKeyIssue.list" ref="oneKeyIssue.list" size="small">
        <el-form-item label="问题列表 : " label-width="100px">
          <el-select v-model="oneKeyIssue.value" placeholder="请选择 (搜索 - 清空)" filterable size="small" style="width: 100%" clearable>
            <el-option :label="item" :value="item" v-for="(item, index) in oneKeyIssue.list.issueList" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitOneKeyIssue()" size="small">提 交</el-button>
        <el-button size="small" @click="oneKeyIssue.show = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 图片预览 -->
    <el-dialog title="操作" :visible.sync="img.show" width="50%" class="img-show">
      <img :src="img.src" alt />
      <div
        class="down"
        @click="
          img.show = false;
          img.src = '';
        "
      >
        <i class="fa fa-times"></i>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 添加数据弄好，接下去是修改数据
import uploads from "@/components/other/uploads.vue";
export default {
  components: {
    uploads,
  },
  data() {
    return {
      form: {
        evaluate: { period: "", village_id: "" },
        rules: {
          title: [{ required: true, message: "请输入标题", trigger: "blur" }],
          street_id: [{ required: true, message: "请选择街道", trigger: "change" }],
          village_id: [{ required: true, message: "请选择村", trigger: "change" }],
          street_user_name: [{ required: true, message: "街道管理员不能为空", trigger: "change" }],
          village_user_name: [{ required: true, message: "村管理员不能为空", trigger: "change" }],
          user_id: [{ required: true, message: "请选择考评员", trigger: "change" }],
          auditor_id: [{ required: true, message: "请选择审核员", trigger: "change" }],
          time: [{ required: true, message: "请选择考评时间", trigger: "change" }],
          expire_time: [{ required: true, message: "请选择整改限时", trigger: "change" }],
          year: [{ required: true, message: "请选择年份", trigger: "change" }],
          period: [{ required: true, message: "请选择期数", trigger: "change" }],
        },
        loading: false,
      },
      userList: [], //所有人员列表
      checkList: [], //考评员列表
      auditorList: [], //审核员列表
      streetList: [], //街道列表
      villageList: [], //村列表
      yearPeriodList: [], //年份和期数
      standardList: [], //标准列表
      // 一键问题设置
      oneKeyIssue: {
        show: false,
        list: [],
        value: "",
      },
      // 图片预览
      img: {
        show: false,
        src: "",
      },
    };
  },
  methods: {
    // 获取街道下村列表
    getStreetVillageList(street_id) {
      // 清空村的选择
      this.form.evaluate.village_id = "";
      if (street_id) {
        this.axios.post("/admin/Index/get_street_village_list", { street_id }).then((res) => {
          res = res.data;
          this.villageList = res.data;
        });
      } else this.villageList = [];
    },
    // 提交整改
    submitChange() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.evaluate.state = 1;
          this.submit();
        }
      });
    },
    // 设置一键问题
    submitOneKeyIssue() {
      if (this.oneKeyIssue.value) {
        this.oneKeyIssue.list.issueImgList.forEach((item) => (item.issue = this.oneKeyIssue.value));
        this.oneKeyIssue.show = false;
        this.oneKeyIssue.value = "";
        this.oneKeyIssue.list = [];
        this.common.message({ message: "设置成功" });
      } else this.common.message({ type: "error", message: "问题不能为空" });
    },
    // 整改开关
    changeState(standard) {
      // 关闭整改
      if (standard.state == 0) standard.issueImgList = [];
    },
    // 检查标准问题图片的具体内容是否填写
    checkStandardIssueImgIssueContent() {
      for (let i in this.standardList) {
        let standard = this.standardList[i];
        for (let j in standard["issueImgList"]) {
          let issueImg = standard["issueImgList"][j];
          if (!issueImg["issue"]) {
            this.common.message({ type: "error", message: standard.title + "下 , 序号 : " + (parseInt(j) + 1) + " , 问题不能为空" });
            return false;
          }
        }
      }
      return true;
    },
    // 提交
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = { ...this.form.evaluate };
          // 村
          let village = this.villageList.find((item) => item.id == data.village_id);
          // 村名称、村管理员id
          data.village_name = village["title"];
          data.village_user_id = village["user_id"];
          data.village_user_name = this.userList.find((item) => item.id == data.village_user_id)["username"]; // 村管理员名称名称
          data.user_name = this.userList.find((item) => item.id == data.user_id)["username"]; // 考评员名称
          data.auditor_name = this.userList.find((item) => item.id == data.auditor_id)["username"]; // 审核员名称
          // 街道名称、街道管理员id
          let street = this.streetList.find((item) => item.id == data.street_id);
          data.street_name = street["title"];
          data.street_user_id = street["user_id"];
          data.street_user_name = this.userList.find((item) => item.id == data.street_user_id)["username"]; // 审核员名称

          data.standard_list = this.standardList;

          // 检查问题图片是否选择具体问题
          if (this.checkStandardIssueImgIssueContent()) {
            this.form.loading = true;
            this.axios.post("/admin/Index/add_evaluate", data).then((res) => {
              res = res.data;
              this.common.message({ type: "success", message: res.info });
              setTimeout(() => {
                this.$router.go(-1);
                this.form.loading = false;
              }, 500);
            });
          }
        }
      });
    },
    // 获取所有标准问题图片总和
    getStandardIssueImgSum() {
      let sum = 0;
      this.standardList.forEach((item) => {
        sum = sum + item.issueImgList.length;
      });
      return sum;
    },
    // 获取标准总得分
    getStandardSumGetScore() {
      let sum = 0;
      this.standardList.forEach((item) => {
        sum = sum + item.before_score;
      });
      // 保留两位小数
      return parseFloat((this.getStandardSumScore() - sum).toFixed(4));
    },
    // 获取标准总分
    getStandardSumScore() {
      let score = 0;
      this.standardList.forEach((item) => {
        score = score + item.score;
      });
      return score;
    },
    // 修改整改前扣分
    editOldMinusScore(standard) {
      this.$prompt("请输入扣分", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: standard.before_score,
        inputValidator: (value) => {
          if (!/^-?\d*\.?\d+$/.test(value)) return "只能输入整数或者小数";
          if (value > standard.score) return "分数已超,请检查,最高分为 : " + standard.score;
          if (value < 0) return "不能输入负数";
        },
      }).then(({ value }) => {
        standard.before_score = parseFloat(value);
      });
    },
    // 删除问题图片
    delIssueImg(issueImgList, issueImgIndex) {
      this.common.confirm().then(() => {
        issueImgList.splice(issueImgIndex, 1);
      });
    },
    // 修改整改前备注
    editOldMessage(issueImg) {
      this.$prompt("请输入内容", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(({ value }) => {
        issueImg.info_before = value;
      });
    },
    // 上传实地照片
    uploadOld(img) {
      let standardIndex = img.info,
        imgList = img.list;

      // 设置问题图片
      imgList.forEach((img) => {
        let imgTitle = img.title.split(".");
        imgTitle.length = imgTitle.length - 1;
        imgTitle = imgTitle.join(".");

        let issueImgList = this.standardList[standardIndex].issueImgList;
        issueImgList.push({
          img_before: img.path,
          img_before_thumb: img.thumb_path,
          img_before_title: imgTitle,
          info_before: "",
          issue: "",
          check_state: 1, //整改是否通过 默认不通过
          is_change: 1, //是否需要整改 默认需要
        });

        this.standardList[standardIndex].issueImgList = issueImgList;
      });
    },
    // 获取标准列表
    getStandardList(year) {
      let yearId = this.yearPeriodList.find((item) => item.year == year)["id"];
      // 清空期数
      this.form.evaluate.period = "";
      this.axios.post("/admin/Index/get_add_evaluate_standard_list", { year_period_id: yearId }).then((res) => {
        res = res.data;
        // 设置默认字段,不然vue2无法启动响应式
        this.standardList = res.data.map((item) => {
          item.issueImgList = []; //图片问题列表
          item.before_score = 0; //整改前扣分
          item.issueList = item.issue.split(","); // 设置问题描述列表
          return item;
        });
      });
    },
    // 获取期数
    getPeriodList() {
      let year = this.form.evaluate.year,
        stringNumber = ["", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
      if (this.form.evaluate.year) {
        let period = this.yearPeriodList.find((item) => item.year == year)["period"],
          periodList = [];
        for (let i = 1; i <= period; i++) periodList.push("第" + stringNumber[i] + "期");
        return periodList;
      } else {
        return [];
      }
    },
    // 获取选中村的村管理员名称
    getCheckVillageUserName() {
      let village_id = this.form.evaluate.village_id;
      if (village_id) {
        return this.villageList.find((item) => item.id == village_id)["title"];
      } else return "请选择村";
    },
    // 获取选中街道的街道管理员名称
    getCheckStreetUserName() {
      let street_id = this.form.evaluate.street_id;
      if (street_id) {
        return this.streetList.find((item) => item.id == street_id)["title"];
      } else return "请选择街道";
    },
    // 获取添加考评相关下拉列表
    getAddEvaluateSelect() {
      this.axios.post("/admin/Index/get_add_evaluate_select").then((res) => {
        let data = res.data;
        this.userList = data.user_list;
        this.checkList = data.check_list;
        this.auditorList = data.auditor_list;
        this.streetList = data.street_list;
        this.yearPeriodList = data.year_period_list;
      });
    },
  },
  created() {
    this.getAddEvaluateSelect();
    // 添加类型
    this.form.evaluate.type = this.$route.query.type;
    // 非管理员添加考评时,自动选择考评员为自己
    let user = this.$store.state.user;
    if (user.username != "admin") this.form.evaluate.user_id = user.id;
  },
};
</script>

<style scoped>
.add .evaluate {
  background-color: #fff;
  border-radius: 6px;
  padding: 20px;
  padding-top: 10px;
}

.add .evaluate .title-back {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.add .evaluate .title-back .title {
  font-size: 16px;
}

.add .evaluate .title-back .back {
  display: flex;
  align-items: center;
}

.add .evaluate .title-back .back .note {
  margin-right: 10px;
}

.add .evaluate .form {
  margin-top: 20px;
}

.add .evaluate .form .el-form-item {
  width: calc(50% - 20px);
}

.add .evaluate .form >>> .el-form-item .el-form-item__content {
  width: calc(100% - 100px);
}

.add .evaluate .form >>> .el-form-item .el-select,
.add .evaluate .form >>> .el-form-item .el-input {
  width: 100%;
}

.add .standard > .title {
  font-size: 16px;
  background-color: #fff;
  border-radius: 6px;
  padding: 10px;
  margin-top: 10px;
}

.add .standard .year-period {
  background-color: #fff;
  border-radius: 6px;
  padding: 15px 10px;
  margin-top: 10px;
}

.add .standard .year-period .el-form-item {
  margin-bottom: 0;
}

.add .standard > .list {
  margin-top: 20px;
}

.add .standard > .list > .item:nth-of-type(n + 2) {
  margin-top: 30px;
}

.add .standard > .list > .item .title-score {
  display: flex;
}

.add .standard > .list > .item .title-score .title {
  font-size: 16px;
}

.add .standard > .list > .item .title-score .score {
  color: #f40;
  margin-left: 20px;
  font-size: 16px;
}

.add .standard > .list > .item > .content {
  margin: 20px 0;
  line-height: 25px;
  color: #666;
  padding: 0;
}

.add .standard > .list > .item .change {
  margin-bottom: 10px;
}

.add .standard > .list > .item .change .label {
  color: #666;
  font-size: 13px;
  margin-bottom: 10px;
}

.add .standard > .list > .item .upload-issueSetting {
  padding: 20px 0;
  border-top: 1px solid #f3f5f7;
  display: flex;
}

.add .standard > .list > .item .upload-issueSetting > .el-button {
  margin-left: 10px;
}

.add .standard > .list > .item .issue-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.add .standard > .list > .item .issue-list .item {
  display: flex;
  width: calc(50% - 20px);
  justify-content: space-between;
  padding: 0;
}

.add .standard > .list > .item .issue-list .item:nth-of-type(n + 3) {
  border-top: 1px solid #eee;
  margin-top: 15px;
  padding-top: 15px;
}

.add .standard > .list > .item .issue-list .item .img {
  display: flex;
  align-items: center;
}

.add .standard > .list > .item .issue-list .item .img .old .bg,
.add .standard > .list > .item .issue-list .item .img .new .bg {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px;
  cursor: pointer;
}

.add .standard > .list > .item .issue-list .item .img .new .bg .icon {
  font-size: 30px;
  line-height: 100px;
  width: 100%;
  text-align: center;
}

.add .standard > .list > .item .issue-list .item .img .old .label,
.add .standard > .list > .item .issue-list .item .img .new .label {
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  font-weight: 700;
  width: 100px;
  height: 60px;
  overflow: hidden;
}

.add .standard > .list > .item .issue-list .item .img > .icon {
  font-size: 30px;
  width: 70px;
  text-align: center;
  margin-top: -20px;
}

.add .standard > .list > .item .issue-list .item .message {
  width: calc(100% - 300px);
}

.add .standard > .list > .item .issue-list .item .message .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add .standard > .list > .item .issue-list .item .message .header .right {
  display: flex;
  align-items: center;
}

.add .standard > .list > .item .issue-list .item .message .header .right .is-change {
  margin-right: 10px;
}

.add .standard > .list > .item .issue-list .item .message .header .right .add-message,
.add .standard > .list > .item .issue-list .item .message .header .right .delete-issue {
  margin-left: 20px;
  font-size: 20px;
  cursor: pointer;
}

.add .standard > .list > .item .issue-list .item .message .content {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10px;
}

.add .standard > .list > .item .score-count {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 5px;
}

.add .standard > .list > .item .score-count .score,
.add .standard > .list > .item .score-count .count {
  display: flex;
  font-size: 18px;
}

.add .standard > .list > .item .score-count .score p,
.add .standard > .list > .item .score-count .count p {
  font-size: 18px;
  margin: 0;
  margin-right: 20px;
}

.add .standard > .list > .item .score-count .score p span,
.add .standard > .list > .item .score-count .count p span {
  color: #f40;
  font-weight: bold;
  font-size: 18px;
}

.add .standard > .list > .item .score-count i {
  cursor: pointer;
}

.add .sumScoreCount {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 6px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 5px;
}

.add .sumScoreCount .item {
  display: flex;
  align-items: center;
  font-size: 20px;
}

.add .sumScoreCount .item p {
  margin: 0;
  font-size: 20px;
  margin-right: 20px;
}

.add .sumScoreCount .item p span {
  color: #f40;
  font-weight: bold;
  font-size: 20px;
}

.add .sumScoreCount .item i {
  cursor: pointer;
}

.add .submit {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 6px;
  padding: 10px;
}

/* 图片展示 */
.img-show >>> .el-dialog {
  border-radius: 5px;
  overflow: hidden;
}

.img-show >>> .el-dialog__body {
  position: relative;
  font-size: 0;
  padding: 0 !important;
  text-align: center;
}

.img-show >>> .el-dialog__header {
  display: none;
}

.img-show >>> .down {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
}
</style>